<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="../Bootstrap/js/jquery-1.11.1.min.js"></script>
    <style>
        * {
            margin: 0;
        }

        #footer_top {

            background-color: ghostwhite;
            width: 100%;
            height: 55px;;
        }

        .navigation {
            width: 25%;
            float: left;
            height: 55px;
        }

        .home_img {
            width: 60px;
            height: 100%;
            margin: 0 auto;

        }

        .home_img img {
            margin-left: 17px;
            width: 25px;
            height: 25px;
            margin-top: 5px;
        }

        .spa{
            color: gray;
            width: 60px;
            font-size: 12px;
            text-align: center;
        }

        a:link {
            text-decoration: none;
        }

    </style>
    <script>
        $(document).ready(function(){
            $(".home_img").click(function() {
                $(".home_img").find(".spa").css('color', 'gray');
                $(this).find(".spa").css('color', '#00BB9C');
            });
        });

        function change(index) {
            var img = new Array();
            img[0] = "../img/homepage.png";
            img[1] = "../img/indent.png";
            img[2] = "../img/shopcar.png";
            img[3] = "../img/user.png";

            var img2 = new Array();
            img2[0] = "../img/homepage2.png";
            img2[1] = "../img/indent2.png";
            img2[2] = "../img/shopcar2.png";
            img2[3] = "../img/user2.png";
            $(".sort").eq(0).attr({src: img[0]});
            $(".sort").eq(1).attr({src: img[1]});
            $(".sort").eq(2).attr({src: img[2]});
            $(".sort").eq(3).attr({src: img[3]});
            $(".sort").eq(index).attr({src: img2[index]});
        }
    </script>
    <title></title>
</head>
<body>
<footer >
    <div id="footer_top" >
        <div class="navigation">
            <a href="../home.html" target="oubao" onclick="change(0)">
                <div class="home_img"><img class="sort"  src="../img/homepage2.png">
                    <div class="spa" style="color:#00BB9C;">主页</div>
                </div>
            </a>
        </div>
        <div class="navigation">
            <a href="../collect.html" target="oubao" onclick="change(1)">
                <div class="home_img"><img class="sort" src="../img/indent.png">
                    <div class="spa">我的收藏</div>
                </div>
            </a>
        </div>
        <div class="navigation">
            <a href="../shopping.html" target="oubao" onclick="change(2)">
                <div class="home_img"><img class="sort" src="../img/shopcar.png">
                    <div class="spa">购物车</div>
                </div>
            </a>
        </div>
        <div class="navigation">
            <a href="../PersonCenter.html" target="oubao" onclick="change(3)">
                <div class="home_img"><img class="sort" src="../img/user.png">
                    <div class="spa">个人中心</div>
                </div>
            </a>
        </div>
    </div>

</footer>
</body>
</html>